<link href="{{$LAYOUT_HELPER_URL}}admin/js/jquery-ui/css/ui-lightness/jquery-ui.css" rel="stylesheet" type="text/css"/>
<script src="{{$LAYOUT_HELPER_URL}}admin/js/jquery-ui/js/jquery-ui.js"></script>
<!--<script type="text/javascript" src="{{$LAYOUT_HELPER_URL}}admin/js/jquery.ui.datepicker.validation.min.js"></script>-->
<script type="text/javascript">

var card = new Array();
{{foreach from=$allCategories item=card}}
	card["{{$card.bkcard_category_id}}"] = new Array();
	card["{{$card.bkcard_category_id}}"]["value"] = "{{$card.value}}";
{{/foreach}}

jQuery(document).ready(function() {

	jQuery('#bkcard_category').bind('change',function(){
		id = jQuery('#bkcard_category').val();
		jQuery('#bkcard_value').val(card[id]["value"]);
	});
	jQuery('#bkcard_category').trigger('change');
	
    // validate signup form on keyup and submit
	jQuery("#newcard").validate({
        rules: {
            'data[name]': "required",
            'data[value]': "required"
//            'data[expired_date]': {
//                required: true,
//            	dpDate: true
//            }
        },
        messages: {
            'data[name]': "",
            'data[value]': ""
//            'data[expired_date]': ""
        }
    });
    
	//Datepicker
    jQuery( ".date" ).datepicker({
        showAnim        : "slideDown",
        showButtonPanel : true,
        dateFormat      : "{{$datepickerFormat.js}}"
    }); 
});

function submitForm()
{
	jQuery("#newcard").submit();
}


</script>         
            <div class="content-box"><!-- Start Content Box -->
                
                <div class="content-box-header">
                    
                    <h3>{{l}}New BKCard{{/l}}</h3>
                    <div class="clear"></div>
                    
                </div> <!-- End .content-box-header -->
                
                <div class="content-box-content">
                
                    <form id="newcard" name="newcard" action="" method="post">
                    
                    <div class="tab-content" id="tab1">
                    
                        <!-- ERROR -->
                        {{if $errors|@count > 0}}
                        <div class="notification error png_bg">
                            <a href="#" class="close"><img src="{{$LAYOUT_HELPER_URL}}admin/images/icons/cross_grey_small.png" title="Close this notification" alt="close" /></a>
                            <div>
                                {{if $errors.main}}
                                    {{l}}Error:{{/l}} {{$errors.main}}
                                {{else}}
                                    {{l}}Error:{{/l}} {{l}}Please check following information again{{/l}}
                                {{/if}} 
                                                                       
                            </div>
                        </div>
                        {{/if}}
                            
                            <fieldset> <!-- Set class to "column-left" or "column-right" on fieldsets to divide the form into columns -->
                                
                                <p>
                                    <label>{{l}}Category{{/l}}<span class="red">*</span></label>              
                                    <select name="data[bkcard_category_id]" id="bkcard_category" class="small-input">
                                    {{foreach from=$allCategories item=item}}
                                        <option value="{{$item.bkcard_category_id}}" {{if $data.bkcard_category_id == $item.bkcard_category_id}}selected="selected"{{/if}}>{{$item.name}}</option>
                                    {{/foreach}}
                                    </select> 
                                </p>
                                
                                <p>
                                    <label>{{l}}Value{{/l}}<span class="red">*</span></label>
                                        <input class="text-input small-input" type="text"  name="data[value]" value="{{$data.value}}" readonly="readonly" id="bkcard_value" />
                                </p>
                                <p>
                                    <label>{{l}}Expired date{{/l}}<span class="red">*</span></label>
                                        <input class="text-input small-input date" type="text"  name="data[expired_date]" value="{{$data.expired_date}}" />
                                        <br /><small>Format: {{$datepickerFormat.display}}</small>
                                </p>
                                
                                <p>
                                    <label>{{l}}Number of{{/l}}<span class="red">*</span></label>
                                        <input class="text-input small-input" type="text"  name="data[number_of]" value="{{$data.number_of}}" id="number_of"/>
                                </p>
                                
                                <p>
                                <br/>
                                    <input class="button" type="button" value="{{l}}Save{{/l}}" onclick="javascript:submitForm();" />
                                </p>
                                
                            </fieldset>
                            
                            <div class="clear"></div><!-- End .clear -->
                            
                    </div>  <!-- End #tab1 --> 
                    
                  </form>
                </div> <!-- End .content-box-content -->
                
            </div> <!-- End .content-box -->
            
            
            <div class="clear"></div>
